import PropTypes from 'prop-types'
import React, { memo, useState, useCallback } from 'react'
import { SelectionWrapper } from './style'
import SelectionHeader from '@/components/selection-header'
import SelectionRooms from '@/components/selection-rooms'
import SelectionTabs from '@/components/selection-tabs'
import SelectionFooter from '@/components/selection-footer'

const HomeSelectionV2 = memo((props) => {
  const { infoData = {} } = props

  const tabNames = infoData.dest_address?.map(item => item.name)

  const initialName = Object.keys(infoData.dest_list)[0]
  const [curName, setCurName] = useState(initialName)
  const tabHandleClick = useCallback((name, index) => {
    setCurName(name)
  }, [])

  return (
    <SelectionWrapper>
      <SelectionHeader title={infoData?.title} subtitle={infoData?.subtitle} />
      <SelectionTabs tabNames={tabNames} tabClick={tabHandleClick} />
      <SelectionRooms roomList={infoData?.dest_list?.[curName]} itemWidth="33.33%" />
      <SelectionFooter name={curName} />
    </SelectionWrapper>
  )
})

HomeSelectionV2.propTypes = {
  infoData: PropTypes.object
}

export default HomeSelectionV2